<template>
  <view class="order_notice_list_view" v-if="items.length > 0">
    <view class="order_notice_content" @tap="onDetailTap(item)" v-for="item in items" :key="item.AutoNo">
      <view class="order_notice_car_number">编号:{{ item.Bh }}</view>
      <view class="order_notice_order_timer">车号:{{ item.Ch }}</view>
      <view class="order_notice_sub_content">
        <view class="order_notice_sub_content_dec">
          <view class="order_notice_customer">{{ computeDesc(item) }}</view>
        </view>
        <view class="order_notice_status"
          :style="{ borderColor: item.IsFinish ? 'rgba(26, 102, 255, 1)' : 'rgba(249, 164, 212, 1)' }">
          <view class="" >
            <view class="order_notice_status_type" :style="{ color: item.IsFinish ? 'rgba(26, 102, 255, 1)' : 'rgba(249, 164, 212, 1)' }">
              {{ item.IsFinish ? '已完成' : '未完成' }}
            </view>
            <view class="order_notice_status_icon">
              <image v-if="item.IsFinish" src="../../static/images/index/index_circle_arror_right.png"
                style="width: 9px;height: 9px;">
              </image>
              <image v-else src="../../static/images/index/index_circle_arror_right_undo.png"
                style="width: 9px;height: 9px;">
              </image>
            </view>

          </view>
        </view>

      </view>
    </view>
  </view>

  <uv-empty mode="list" icon="/static/empty/list.png" text="暂无数据或未登录" marginTop="25%" v-else></uv-empty>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits, watch, getCurrentInstance, computed, toRaw, unref } from 'vue'
import { overflow } from '@/utils/index';
import { usePoundStore } from '@/stores'

const poundStore = usePoundStore()

const props = defineProps({
  items: {
    type: Array,
    default: () => {
      return []
    }
  }
})

const emit = defineEmits(['detail'])


const computeDesc = computed(() => {
  return (record) => {
    const nots = ['AutoNo', 'Ch', 'Bh']
    const text = Object.entries(record).filter(p => !nots.includes(p[0]) && p[1] != null && p[1] != '').map(p => `${computeField(p[0])}:${p[1]}`).join(',')
    return overflow(text, 50)
  }
})

const computeField = (field) => {
  const f = poundStore.state.fields.find(p => p.key == field)
  return f ? f.value : '--'
}

const onDetailTap = (item) => {
  emit('detail', item)
}



</script>

<style scoped lang="scss">
@import "@/styles/aj_custom/index.scss";

.order_notice_list_view {
  .order_notice_content {
    box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: white;
    padding: 5px 10px;
    margin: 10px 10px;

    .order_notice_car_number {
      font-size: 13px;
      padding-bottom: 12px;
    }

    .order_notice_order_timer {
      font-size: 10px;
      color: gray;
      padding-bottom: 10px;
    }

    .order_notice_sub_content {
      display: flex;
      color: gray;
      font-size: 9px;
      justify-content: space-between;

      .order_notice_sub_content_dec {
        display: flex;
      }

      .order_notice_status {
        border: 1px solid;
        border-radius: 10px;
        padding: 3px 15px;
        align-items: center;

        .order_notice_status_type {
          display: inline-block;
        }

        .order_notice_status_icon {
          display: inline-block;
          padding-left: 5px;
        }
      }
    }
  }
}
</style>
